class FirstPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            thumburl: '',
            name: '',
            id: '0',
            gysm:'',
            partcount: 1,
            parts: [{ src: '' }, { src: '' }, { src: '' }],
            categorylist: [],
            select_swiperlink: { name: '请选择' },
            swiperimglist: [],
            category_select_list: [],
            recommendtablehtml: [],
            recommendlist: [],
            goods_select_html: [],
            currentswipertype: 0,
            swiperlinkhtml: [],
            showjf: !1,
            swipertablehtml: [],
            swiperimghtml: [],
            xslist: [],
            swiper: {
                imgs: [],
                links: []
            },
            fileimgshow: !0,
            imgstate: '',
            imgsrc: '',
            to: '',
            type: 'GTCZ', //CPLB 产品类别  GTCZ 柜体材质
            additem: {
                name: '',
                type: '',
                unit: '',
                imgurl: '',
                price: ''
            },
            addsditem: {
                sdtype: 'MI',
                min: '',
                max: '',
                number: ''
            }

        };
    }

    cleanadd() {
        this.setState({
            additem: {
                name: '',
                type: '',
                unit: '',
                imgurl: '',
                price: ''
            }, addsditem: {
                sdtype: 'MI',
                min: '',
                max: '',
                number: ''
            }
        })
    }



    componentDidMount() {
        let company = $.cookie('company')
        this.freshlist()
        this.setState({gysm:$.cookie('gysm'),company})
        // getxs({sdtype:'PF',point:500},res=>{

        // }) 

    }

    freshlist() {
        dz_getcategorylist(this.state.type, res => {
            if (res.issuccess == 1) {
                let xslist = res.list.filter(x => { return x.type == 'XSSD' })


                this.setState({ list: res.list, xslist })
                this.cleanadd()
                // this.formatlist(res.list);      
                console.log(res.list)
            } else {
                alert(res.msg)
            }
        })




    }





    /**新建 */
    add(e) {
        var name = prompt('请输入分类名称');
        if (name != null) {
            aoedzcate({ name }, res => {
                if (res.issuccess == '1') {
                    this.freshlist()
                } else {
                    alert(res.msg)
                }
            })
        }
    }


    // 编辑
    edit(x) {
        var name = prompt('请编辑分类名称', x.name)
        if (name != '') {
            aoedzcate({ id: x.id, name }, res => {
                if (res.issuccess == 1) {
                    this.freshlist()
                } else {
                    alert(res.msg)
                }
            })
        }

        // 
    }
    tosub(x) {
        window.location.href = "./dz_subcate.html?id=" + x.id + "&name=" + x.name;
    }
    // 排序
    toorder(id) {
        let orders = prompt("请输入1-999的正整数"), { start } = this.state
        if (orders == "" || orders == null) {
            return;
        }
        if (isNaN(orders) || orders < 1 || orders > 999) {
            return;
        }
        orders = Math.floor(orders);
        Swipersetorders({ id, orders }, res => {
            if (res.issuccess == 1) {
                //   alert("设置成功");
                this.freshlist(start);
            }
        });
    }
    // // 上架下架
    // setshow(e, i, cid) {
    //     let { start } = this.state
    //     Goodssetstate({ id: e, cid }, res => {
    //         if (res.issuccess == 1) {
    //             alert(`${i == "0" ? '下架' : '上架'}成功`)
    //             this.freshlist(start)
    //         }
    //     })
    // }
    // 删除
    del(e, cid) {
        this.setState({ delid: e, newcid: cid }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        dz_delcate(delid, res => {
            if (res.issuccess == 1) {
                // alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    switch(t) {
        let { type } = this.state;
        if (type != t) {
            this.setState({ type: t }, () => {
                this.freshlist()
            })
        }
    }

    clickitem(i, prop) {
        console.log({ i, prop }, 'clickitem');
        var _def = ""
        if (i > -1) _def = this.state.list[i][prop]
        var value = prompt('请填入', _def)
        if (value != null) {
            if (i < 0) {
                let { additem } = this.state;
                additem[prop] = value;
                this.setState({ additem })


            } else {
                let { list } = this.state;
                //  list[i][prop] = value
                // console.log(list,'listlist');
                // this.setState({list})
                dz_category_editsingle({ id: list[i].id, value, prop }, res => {
                    if (res.issuccess == 1) {
                        //   alert('修改成功')
                        this.freshlist()
                    }
                })
            }
        }
        //  this.setState({[prop]:value})

    }

    clicksditem(i, prop) {
        console.log({ i, prop }, 'clickitem');
        var _def = ""
        if (i > -1) _def = this.state.xslist[i][prop]
        var value = prompt('请填入', _def)
        if (value != null) {
            if (i < 0) {
                let { addsditem } = this.state;
                addsditem[prop] = value;
                this.setState({ addsditem })
            } else {
                let { xslist } = this.state, item = xslist[i];
                item[prop] = value;
                //  list[i][prop] = value
                // console.log(list,'listlist');
                // this.setState({list})
                aoedzcate_sd(item, res => {
                    if (res.issuccess == 1) {
                        //  alert('添加成功')
                        this.freshlist()
                    } else {
                        alert(res.msg)
                    }
                })
            }
        }
        //  this.setState({[prop]:value})

    }


    savesd(i) {
        let data = {}
        console.log(i, 'save---i');
        if (i > -1) {
            let { xslist } = this.state;
            data = xslist[i]

        } else {
            let { addsditem } = this.state
            data = addsditem;
            // data['type'] = this.state.type 
        }

        aoedzcate_sd(data, res => {
            if (res.issuccess == 1) {
                //  alert('添加成功')
                this.freshlist()
            } else {
                alert(res.msg)
            }
        })
    }


    save(i) {
        let data = {}
        console.log(i, 'save---i');
        if (i > -1) {
            let { list } = this.state;
            data = list[i]

        } else {
            data = this.state.additem;
            data['type'] = this.state.type
        }
        aoedzcate(data, res => {
            if (res.issuccess == 1) {
                //  alert('添加成功')
                this.freshlist()
            } else {
                alert(res.msg)
            }
        })

    }

    upload(index) {
        if (index < 0) {
            $('#file1').click();

        } else {
            this.setState({ selectindex: index }, () => {
                $('#file').click();
            })
        }
    }

    filechangeimg(e) {
        let that = this
        var filedata = $('#file')[0].files[0];
        let _name, _fileName;
        _name = $('#file')[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if(filedata.size>100*1024){
            alert("图片不超过100K，请重新上传");
        }else if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            let filee = e
            var reader = new FileReader();
            console.log(filedata,'eeeee--filedata');
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                let base64 = e.target.result
             

                uploadimg(base64, res => {
                    if (res.issuccess == 1) {
                        let { list, selectindex } = that.state, data = list[selectindex]
                        // let data = this.state.list[this.state.selectindex]
                        data['imgurl'] = res.path
                        list[selectindex] = data
                        dz_category_aoeimg(data, res => {
                            if (res.issuccess == 1) {
                                that.setState({ list })
                            }
                        })
                        // that.setState({ path: res.path })
                    }
                })

            }
        }
    }
    filechangeimgnew(e) {
        let that = this
        var filedata = $('#file1')[0].files[0];
        let _name, _fileName;
        _name = $('#file1')[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            let filee = e
            var reader = new FileReader();
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                uploadimg(e.target.result, res => {
                    if (res.issuccess == 1) {
                        let { additem } = that.state
                        additem['imgurl'] = res.path
                        that.setState({ additem }, () => {
                            console.log(that.state.additem, 'additem');
                        })
                    }
                })

            }
        }
    }


    selectchange(i, e) {
        console.log({ i, val: e.target.value }, 'selectchange');
        if (i > 0) {
            let { xslist } = this.state, item = xslist[i];
            item['sdtype'] = e.target.value
            aoedzcate_sd(item, res => {
                if (res.issuccess == 1) {
                    //  alert('添加成功')
                    this.freshlist()
                } else {
                    alert(res.msg)
                }
            })
        } else {
            let { addsditem } = this.state;
            addsditem['sdtype'] = e.target.value
            this.setState({ addsditem })
        }
    }

    setpassword() {
        var val = prompt('请输入密码')
        if (val != null) {
            dz_category_setpwd(md5(val + Constant.SALT), res => {
                if (res.issuccess == 1) {
                    alert('设置成功')
                }
            })

        }

    }

    setupassword() {
        var val = prompt('请输入密码')
        if (val != null) {
            dz_user_setpwd(val, res => {
                if (res.issuccess == 1) {
                    alert('设置成功')
                }
            })

        }

    }

    gysm(g){
       // if(content)
       let that = this
       if(g.length>0){
        gysmedit(g,res=>{
            if(res.issuccess==1){
                $.cookie('gysm',g)
                that.setState({gysm:g})
                $('#textareaModal').modal('toggle');
            }
        })
       }

    }





    render() {
        var { list, additem, type, xslist, addsditem,company, showjf } = this.state;
        console.log(type, 'tttt');
        return (
            <div className="breadLinebox">
                {
                    showjf ?
                        <div className="modal_jf">
                            <div onClick={() => { this.setState({ showjf: !1 }) }} className="mask"></div>
                            <div className="wrap">
                                <img src="./src/jiaofei.jpg" alt="" srcset="" />
                            </div>
                        </div>
                        : null
                }


                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <TextAreaModal  title='工艺说明'  gysm={this.state.gysm} click={this.gysm.bind(this)}/>
                {/* <CateaddModal  title='新增行'  name={this.state.gysm} click={this.gysm.bind(this)}/> */}
                <div className='content_wrap panel-default content_wrap'>
                    <div onClick={() => { window.location.href = './dz_main.html' }} className='breadLine'>
                        <p>返回</p>

                    </div>
                    {/* <div className='inputs panel-body'>
                        <h3>首页管理</h3>
                    </div> */}
                    <div className="content form">
                        {/* <div style={{display:clicknew?"":"none"}} id="div"> */}

                        {/* <div className="tabletit" >
                            {/* <p className="delall"><img src="./src/delall.png"/>批量删除</p> 
                            <p className="add" onClick={this.add.bind(this)}>新建</p>
                        </div> */}
                        <input onChange={this.filechangeimg.bind(this)} type='file' id='file' style={{ display: "none" }} />
                        <input onChange={this.filechangeimgnew.bind(this)} type='file' id='file1' style={{ display: "none" }} />


                       

                        <table className="tab">
                            <thead>
                                <div className="switch">
                                    {/* //CPLB 产品类别  GTCZ 柜体材质 */}
                                    {/* <p onClick={this.switch.bind(this,'CPLB')} className={type=='CPLB'?'c':''}>产品类别</p> */}
                                    <p onClick={this.switch.bind(this, 'GTCZ')} className={type == 'GTCZ' ? 'c' : ''}>柜门柜体材质</p>
                                    <p onClick={this.switch.bind(this, 'WJLB')} className={type == 'WJLB' ? 'c' : ''}>五金类别</p>
                                    <p style={{display:company!=''?'none':''}} onClick={this.switch.bind(this, 'LSFS')} className={type == 'LSFS' ? 'c' : ''}>拉手方式</p>
                                    <p onClick={this.switch.bind(this, 'MBXH')} className={type == 'MBXH' ? 'c' : ''}>门板型号</p>
                                    <p onClick={this.switch.bind(this, 'GTXH')} className={type == 'GTXH' ? 'c' : ''}>柜体型号</p>
                                    <p onClick={this.switch.bind(this, 'XSSD')} className={type == 'XSSD' ? 'c' : ''}>深度设置</p>
                                    <p onClick={this.switch.bind(this, 'TMSM')} style={{ 'width': '110px' }} className={type == 'TMSM' ? 'c' : ''}>台面设置说明</p>
                                    <p onClick={this.switch.bind(this, 'MSM')} style={{ 'width': '110px' }} className={type == 'MSM' ? 'c' : ''}>门设置说明</p>

                                    
                                    {/* <p onClick={this.switch.bind(this,'WJCZ')} className={type=='WJCZ'?'c':''}>五金材质</p> */}

                                    <div onClick={this.setpassword.bind(this)} className="btn">详情密码</div>
                                    <div onClick={this.setupassword.bind(this)} className="btn">账号密码</div>
                                    <div onClick={()=>{
                                         $('#textareaModal').modal('toggle');
                                    }} className="btn">工艺说明</div>

{/* <div onClick={()=>{
                                         $('#CateaddModal').modal('toggle');
                                    }} className="btn">新增行</div> */}
                                   
                                <div onClick={() => { window.location.href = './dz_account.html'}} className="btn">账号管理</div>
                                <div onClick={() => { window.location.href = './dz_room.html' }} className="btn">模板设置</div>
                                </div>

                                <div style={{display:type=='XSSD'?'':'none'}} className="shuoming">
                                            {

                                                    <div>
                                                        <p>深度设置说明:</p>
                                                        <p>系数为全局系数，当所有品类深度不同时，可设置系数进行自动调整，比如柜体深度、台面深度不同时，总价会按深度系数进行叠加</p>
                                                        <p>比如1000*1000mm的柜子，单价500元，深度为600，则为正常500元总价，如果深度为601，则系数为1.2，总价则为600元。</p>

                                                    </div>
                                            }
                                        </div>


                                {/* <th className="minwidth tconter"><img src="./src/notselection.png"/></th> */}
                                {
                                    ['LSFS', 'MBXH', 'GTXH', 'TMSM', 'MSM'].indexOf(type) == -1 ?
                                        <tr>
                                            <th style={{ 'width': '40px' }} className="tconter">序号</th>
                                            <th style={{ 'width': '40px', display: type == 'XSSD' ? 'none' : '' }} className="tconter">排序</th>

                                            <th style={{ display: type == 'XSSD' ? 'none' : '' }} className="tconter">名称</th>
                                            <th className="tconter">{type == 'XSSD' ? '最小值' : '单位'}</th>
                                            <th style={{ display: type == 'XSSD' ? '' : 'none' }} className="tconter">最大值</th>
                                            <th className="tconter">{type == 'XSSD' ? '系数值' : '单价'}</th>
                                            <th className="cz tconter">操作</th>

                                        </tr>
                                        : (
                                            ['TMSM', 'MSM'].indexOf(type) == -1 ?
                                                <tr >
                                                    <th style={{ 'width': '40px' }} className="tconter">序号</th>
                                                    <th style={{ 'width': '40px' }} className="tconter">排序</th>
                                                    <th className="tconter">名称</th>
                                                    <th style={{ display: type == 'LSFS' ? 'none' : '' }} className="tconter">图片</th>
                                                    <th className="cz tconter">操作</th>

                                                </tr>
                                                :
                                                <div className="shuoming">

                                                </div>
                                        )


                                }


                            </thead>
                            { 
                                type == 'XSSD' ?
                                    <tbody>

                                       
{
                                            <tr>
                                                {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                <td style={{ 'width': '40px' }} className="tconter"></td>
                                               
                                                <td onClick={this.clicksditem.bind(this, -1, 'min')} className="tconter">{addsditem.min}</td>
                                                <td onClick={this.clicksditem.bind(this, -1, 'max')} className="tconter">{addsditem.max}</td>
                                                <td onClick={this.clicksditem.bind(this, -1, 'number')} className="tconter">{addsditem.number}</td>
                                                <td className="operatebox">
                                                    <div className='operate'>
                                                        <p className='edit' onClick={this.savesd.bind(this, -1)}>新建一行</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        }


                                        {
                                            xslist.map((x, i) => {
                                                return (
                                                    <tr key={i}>
                                                        {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                        {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                        <td style={{ 'width': '40px' }} className="tconter"><div>{i + 1}</div> </td>
                                                        {/* <td style={{'width':'40px'}} className="tconter">
                                          <select value={x.sdtype} onChange={this.selectchange.bind(this,i)}>  {
                                            [
                                                <option key={1} value={'MI'}>米 </option>,
                                                <option key={2} value={'PF'}>平方 </option>
                                            ]
                                          
                                          } </select>
                                          </td> */}
                                                        <td onClick={this.clicksditem.bind(this, i, 'min')} className="tconter">{x.min}</td>
                                                        <td onClick={this.clicksditem.bind(this, i, 'max')} className="tconter">{x.max}</td>
                                                        <td onClick={this.clicksditem.bind(this, i, 'number')} className="tconter">{x.number}</td>
                                                        <td className="operatebox">
                                                            <div className='operate' id={"ope" + x.id}>
                                                                {/* <p className='edit'  onClick={this.save.bind(this,i)}>保存</p> */}
                                                                <div>
                                                                    <img src="./src/del.png" />
                                                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                                                </div>
                                                            </div>

                                                        </td>
                                                    </tr>
                                                )
                                            })
                                        }

                                    </tbody>
                                    :
                                    ['LSFS', 'MBXH', 'GTXH', 'TMSM', 'MSM'].indexOf(type) == -1 ?

                                        <tbody>


{
                                                <tr>
                                                    {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                    {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                    <td style={{ 'width': '40px' }} className="tconter"></td>
                                                    <td onClick={this.clickitem.bind(this, -1, 'orders')} className="tconter">{additem.orders}</td>
                                                    <td onClick={this.clickitem.bind(this, -1, 'name')} className="tconter">{additem.name}</td>
                                                    <td onClick={this.clickitem.bind(this, -1, 'unit')} className="tconter">{additem.unit}</td>
                                                    <td onClick={this.clickitem.bind(this, -1, 'price')} className="tconter">{additem.price}</td>
                                                    <td className="operatebox">
                                                        <div className='operate'>
                                                            <p className='edit' onClick={this.save.bind(this, -1)}>新建一行</p>
                                                        </div>
                                                    </td> 
                                                </tr>
                                            }


                                            {
                                                list.map((x, i) => {
                                                    return (
                                                        <tr key={i}>
                                                            {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                            {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                            <td style={{ 'width': '40px' }} className="tconter"><div>{i + 1}</div></td>
                                                            <td onClick={this.clickitem.bind(this, i, 'orders')} style={{ 'width': '40px' }} className="tconter">{x.orders}</td>
                                                            <td onClick={this.clickitem.bind(this, i, 'name')} className="tconter">{x.name}</td>
                                                            <td onClick={this.clickitem.bind(this, i, 'unit')} className="tconter">{x.unit}</td>
                                                            <td onClick={this.clickitem.bind(this, i, 'price')} className="tconter">{x.price}</td>
                                                            <td className="operatebox">
                                                                <div className='operate' id={"ope" + x.id}>
                                                                    {/* <p className='edit'  onClick={this.save.bind(this,i)}>保存</p> */}
                                                                    <div>
                                                                        <img src="./src/del.png" />
                                                                        <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                                                    </div>
                                                                </div>

                                                            </td>
                                                        </tr>
                                                    )
                                                })
                                            }

                                          
                                        </tbody>
                                        :
                                        <tbody>

{
                                                ['TMSM', 'MSM'].indexOf(type) == -1 ?
                                                    <tr>
                                                        {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                        {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                        <td style={{ 'width': '40px' }} className="tconter"></td>
                                                        <td onClick={this.clickitem.bind(this, -1, 'orders')} className="tconter">{additem.orders}</td>
                                                        <td onClick={this.clickitem.bind(this, -1, 'name')} className="tconter">{additem.name}</td>
                                                        <td style={{ display: type == 'LSFS' ? 'none' : '' }} onClick={this.upload.bind(this, -1)} className="operatebox">
                                                            <img style={{ display: additem.imgurl == '' ? 'none' : '' }} src={IMGSOURCE + additem.imgurl} alt="" />
                                                            <div style={{ display: additem.imgurl == '' ? '' : 'none' }} className='operate'>
                                                                <p className='edit'>上传图片</p>
                                                            </div>
                                                        </td>

                                                        <td className="operatebox">
                                                            <div className='operate'>
                                                                {/* <p className='edit'  onClick={this.upload.bind(this,-1)}>上传图片</p> */}
                                                                <p className='edit' onClick={this.save.bind(this, -1)}>新建一行</p>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    :
                                                    <div className="shuoming">
                                                        {

                                                            type == 'TMSM' ?
                                                                <div>
                                                                    <p>当单位设置成米</p>
                                                                    <p>类似石英石台面，单位设置成米，取值则按宽度进行,</p>
                                                                    <p>类似厨房台面宽度2535mm，则取值为2.535</p>

                                                                </div>
                                                                :
                                                                <div>
                                                                    <p>当单位设置成扇</p>
                                                                    <p>类似室内门，单位设置成扇，取值则按1扇进行</p>
                                                                    <p>比如室内门2400*900，单位为扇，则数量应为1</p>

                                                                </div>
                                                        }
                                                    </div>
                                            }
                                            {
                                                list.map((x, i) => {
                                                    return (
                                                        <tr key={i}>
                                                            {/* <td className="minwidth tconter"><img src="./src/notselection.png"/></td>  */}
                                                            {/* <td className="tconter">{x.state=="0"?"显示":"隐藏"}</td>  */}
                                                            <td style={{ 'width': '40px' }} className="tconter"><div>{i + 1}</div></td>
                                                            <td onClick={this.clickitem.bind(this, i, 'orders')} style={{ 'width': '40px' }} className="tconter">{x.orders}</td>
                                                            <td onClick={this.clickitem.bind(this, i, 'name')} className="tconter">{x.name}</td>
                                                            <td style={{ display: type == 'LSFS' ? 'none' : '' }} onClick={this.upload.bind(this, i)} className="tconter">

                                                                <img style={{ display: x.imgurl == null ? 'none' : '' }} src={IMGSOURCE + x.imgurl} alt="" />
                                                                <div style={{ display: x.imgurl == null ? '' : 'none' }} className='operate'>
                                                                    <p className='edit'>上传图片</p>
                                                                </div>


                                                            </td>
                                                            <td className="operatebox">
                                                                <div className='operate' id={"ope" + x.id}>
                                                                    {/* <p className='edit'  onClick={this.save.bind(this,i)}>保存</p> */}
                                                                    <div>
                                                                        <img src="./src/del.png" />
                                                                        <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                                                    </div>
                                                                </div>

                                                            </td>
                                                        </tr>
                                                    )
                                                })
                                            }

                                           
                                        </tbody>

                            }
                        </table>
                    </div>

                </div >


            </div >
        )
    }
}





ReactDOM.render(
    <div>
        {/* <LeftMenu code='0' /> */}
        <FirstPage />
    </div>
    //<Barrage/>
    , $('.container')[0]
)